body {
		/*background: url(/static/images/bg.png) no-repeat;*/
		/*background: url(/static/images/bg.png)no-repeat;*/
		background: url(/static/images/bg.jpg) no-repeat;
		/*background: rgba(103,169,241,0.24);*/
		background-size: 100% 100%;
	}

	a {
		color: #00F;
	}

	a:hover {
		color: #F00;
	}

	@media all and (min-width: 640px) {
		body,
		html,
		.speak_window,
		.footer {
			width: 640px !important;
			margin: 0 auto
		}
		.speak_window,
		.footer {
			left: 50% !important;
			margin-left: -320px;
		}
	}

	@media only screen and (min-width: 430px) and (max-width: 480px) {
		.icon {
			width: 40px !important;
			height: 40px !important;
		}
	}
	@media only screen and (min-width: 480px) and (max-width: 580px) {
		.icon {
			width: 45px !important;
			height: 45px !important;
		}
	}
	@media only screen and (max-width: 430px) {
		.icon {
			width: 35px !important;
			height: 35px !important;
		}
	}
	.left {
		float: left;
	}

	.right {
		float: right;
	}

	input,
	button {
		outline: none;
	}

	.speak_window {
		overflow-y: scroll;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		bottom: 80px;
	}

	.speak_box {
		margin-bottom: 20px;
		padding: 10px;
	}

	.footer {
		background: #fff;
		border-top: solid 1px #ddd;
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 20px;
	}

	.icon {
		background: #ddd;
		border-radius: 5px;
		overflow: hidden;
		width: 60px;
		height: 60px;
	}

	.icon img {
		width: 100%;
		height: 100%;
	}

	.circle,
	.rectangle {
		width: 15%;
		text-align: center;
	}

	.circle img {
		height: 40px;
	}

	.rectangle button {
		background: #67a9f1;
		color: #fff;
		border-radius: 5px;
		width: 100%;
		height: 40px;
	}

	.chat_box {
		width: 66%;
		height: 40px;
		border-radius: 5px;
	}

	.chat_box input {
		width: 100%;
		height: 40px;
		border-radius: 5px;
	}

	.write_list {
		background: #fff;
		border-top: solid 1px #ddd;
		position: absolute;
		width: 100%;
		height: 30px;
		left: 0;
		padding: 5px;
	}

	.question,
	.answer {
		margin-bottom: 1.9rem;
	}

	.question {
		text-align: right;
	}

	.question>div {
		display: inline-block;
	}

	.answer_text {
		box-sizing: border-box;
		position: relative;
		display: inline-block;
		margin-top: -11.6%;
		margin-left: 11%;
		width: 85%;
		padding: 10px;
		border-radius: 10px;
	}

	.answer_text::before {
		content: '';
		width: 0;
		height: 0;
		border: 16px solid;
		position: absolute;
		/*bottom: 82%;*/
		left: -14px;
		margin-right: 20px;
		/*border-color: #4d494808 #fff #01d8f800 #01d8f805;*/
		border-top-color: rgba(0, 0, 0, 0);
		border-bottom-color: rgba(0, 0, 0, 0);
		border-left-color: rgba(0, 0, 0, 0);
		border-right-color: white;
	}

	.question_text {
		box-sizing: border-box;
		position: relative;
		/*display: inline-block;*/
		/*min-height: 40px;*/
		margin-right: 5%;
		background: #67a9f1;
		display: table-cell;
		min-height: 30px;
		padding: 10px;
		border-radius: 10px;
	}

	.question_text::before {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		border: 10px solid;
		left: 98%;
		bottom: 31%;
		/*border-color: #ffff0003 #01d8f803 #67a9f105 #67a9f1;*/
		border-bottom-color: rgba(0, 0, 0, 0);
		border-right-color: rgba(0, 0, 0, 0);
		border-top-color: rgba(0, 0, 0, 0);
		border-left-color: rgb(103, 169, 241);
	}
	/*.question_text::before {
		content: '';
		width: 0;
		height: 0;
		border: 8px solid;
		position: absolute;
		/*bottom: 10%;*/
	/*margin-right: 5%;*/
	/*margin-left: 10px;*/
	/*left: 70px;*/
	/*border-color: #ff0 transparent transparent;*/
	/*border-color: #ffff0003 #01d8f803 #67a9f105 #67a9f1;*/


	/*}*/

	.question_text p {
		border-radius: 10px;
		/*padding: .5rem;*/
		/*margin-top: -10px;*/
		margin: 0;
		font-size: 14px;
		line-height: 2;
		box-sizing: border-box;
		position: absolute;
		vertical-align: middle;
		display: none;
		height: 30px;
		word-wrap: break-word;
	}

	.answer_text p {
		border-radius: 10px;
		padding: 0.5rem;
		margin: 0;
		font-size: 14px;
		line-height: 2;
		box-sizing: border-box;
		vertical-align: middle;
		display: table-cell;
		/*height: 60px;*/
		word-wrap: break-word;
	}

	.answer_text p {
		background: #fff;
	}

	.question_text p {
		background: #67a9f1;
		color: #fff;
		text-align: left;
	}

	.choose {
		background: #fff;
		/*border-top: -10%;*/
		border-top: 1px;
		padding: 0.5rem;
		/*display: inline-block;*/
		display: flex;
		margin-top: -3%;
/* 		margin-right: 1px; */
		/*border: 3px solid gainsboro;*/
		justify-content: space-between;
		/*box-shadow: 0 2px 10px 0 rgba(48,48,77,.15);*/
		border-radius: 4px;
		overflow: hidden;
	}
	/*.choose >div{
		border: 1px solid;
		display: table-cell;
		padding: 4px ;
	}*/

	.pt {
		height: 21%;
		width: 21%;
		text-align: center;
		/*margin: 2px 2px;*/
		border: 1px solid gainsboro;
/* 		display: table-cell; */
		padding-bottom: 6px;
      padding-left: 5px;
		justify-content: space-between;
		border-bottom: 2px solid #006dff;
		border-radius: 3px;
		margin-bottom: 8px;
     margin-right: 1px;
	}

	.icon-list {
		height: 60px;
		width: 60px;
		padding-top: -40px;
		text-align: center;
		/*margin-left: 22%;*/
		margin: auto;
	}

	.icon-list img {
		height: 100%;
		width: 100%;
		margin-top: 10px;
		vertical-align: top;
	}

	.pecture-text {
/* 		height: 26%; */
		width: 90%;
		background: #fff;
		border: 1px solid gainsboro;
		margin-left: 3%;
		margin-top: 22px;
		border-radius: 4px;
		/* 		background: #006dff8c; */
		background: #67a9f13d;
	}

	.pecture-text a {
		font-size: 70%;
		line-height: 30px;
		color: rgba(103, 169, 241, 1);
		text-decoration: none;
	}
	/*.question_text i {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	position: absolute;
	top: 25px;
}*/
	/*.answer_text i {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 25px;
}*/
	/*.answer_text i {
    border-right: 10px solid #fff;
    left: 10px;
}*/